<template>
    <div >
        <NavTop></NavTop>
        <div style="width: 1400px;margin: auto;">
        <el-table :data="tableData" :border="parentBorder" style="width: 100%">
            <el-table-column type="expand">
            <template #default="props">
                <div m="4">
                <p m="t-0 b-2">订单编号: {{ props.row.orderId }}</p>
                <p m="t-0 b-2">订单时间: {{ props.row.time }}</p>
                <p m="t-0 b-2">订单数量: {{ props.row.num }}</p>
                <p m="t-0 b-2">订单价格: {{ props.row.sum }}</p>
                <h3>商品详情</h3>
                <el-table :data="props.row.child" :border="childBorder">
                    <el-table-column label="商品编号" prop="id" />
                    <el-table-column label="商品名称" prop="name" />
                    <el-table-column label="商品价格" prop="onlinePrice" />
                    <el-table-column label="商品数量" prop="num" />
                    <el-table-column label="商品总价" prop="total" />
                </el-table>
                </div>
          
            </template>
            </el-table-column>
            <el-table-column label="订单编号" prop="orderId" />
            <el-table-column label="订单日期" prop="time" />
            <el-table-column label="订单数量" prop="num" />
            <el-table-column label="订单金额" prop="sum" />
            <el-table-column align="right">
            
            <template #default="scope">
                <el-button
                size="small"
                type="danger"
                @click="pay(scope.$index)"
                v-if="!scope.row.isOrdered"
                >
                支付
                </el-button>
                <el-button
                size="small"
                type="success"
                disabled
                v-else
                >
                已支付
                </el-button>
                <el-button
                size="small"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >
                删除
                </el-button>
            </template>
            </el-table-column>

            
        </el-table>
    </div>
</div>
</template>


<script>
import NavTop from '@/components/NavTop.vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import router from "@/router";
import { ElNotification } from 'element-plus'


export default {
    components:{
        NavTop,
    },
    data() {
        return {
            tableData:JSON.parse(sessionStorage.getItem('order')),
           
        }
    },
    methods: {
      handleDelete(index){
        ElMessageBox.confirm(
            '你是不是，是不是，是不是，是不是，是不是要，是不是不买了，是不是不买了',
            '那我问你，那我问你，那我问你，那我问你',
            {
            confirmButtonText: '对的对的',
            cancelButtonText: '实则不然',
            type: 'warning',
            }
        )
            .then(() => {
            ElMessage({
                type: 'warning',
                message: '你杀死了一小撮数据！！！T^T',
            })
            this.tableData.splice(index,1)
            sessionStorage.setItem('order',JSON.stringify(this.tableData))
            })
            .catch(() => {
            ElMessage({
                type: 'success',
                message: '感谢您的善良Orz',
            })
            }) 

        },
        pay(index){
            //此处假设已经跳转到支付页面完成支付，
            ElMessageBox.confirm(
            '你是不是，是不是，是不是，是不是，是不是要，是不是，是不是要买了',
            '那我问你，那我问你，那我问你，那我问你',
            {
            confirmButtonText: '对的对的',
            cancelButtonText: '实则不然',
            type: 'warning',
            }
        )
            .then(() => {
            ElMessage({
                type: 'success',
                message: '老板大气！！！(\\\\v\\\\)',
            })
           this.tableData[index].isOrdered=true
           sessionStorage.setItem('order',JSON.stringify(this.tableData))
            })
            .catch(() => {
            ElMessage({
                type: 'warning',
                message: '真的不买吗？真的不买吗？O\'v\'O',
            })
            }) 
        
        },
        open(){
            ElNotification({
            title: '请登录',
            message: '你知道的，不是我不想给你看',
            type: 'error',
         })
    }

    },
    mounted() {
        if (sessionStorage.getItem('username') == null || sessionStorage.getItem('username') =='游客' ) {
            console.log('12311111');
            this.open()
            router.push('/login');
         
        } 
        
    },

 
}
</script>